<script setup>
import { onMounted } from 'vue';

import * as echarts from 'echarts';

const data = [
  { name: '北京分行', value: 120 },
  { name: '上海分行', value: 110 },
  { name: '广州分行', value: 95 },
  { name: '深圳分行', value: 90 },
  { name: '成都分行', value: 88 },
];

const totalCount = data.reduce((sum, item) => sum + item.value, 0);

onMounted(() => {
  const chartDom = document.querySelector('#chart');
  const myChart = echarts.init(chartDom);

  const option = {
    legend: {
      top: '5%',
      textStyle: {
        color: '#fff',
      },
      left: '5%',
      orient: 'vertical',
    },
    series: [
      {
        name: '荣誉数量',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['50%', '60%'],
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: false,
        },
        itemStyle: {
          borderRadius: 4,
        },
      },
    ],
    color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b', '#b250ff'],
    graphic: {
      elements: [
        {
          type: 'text',
          left: 'center',
          top: '52%',
          style: {
            text: `${totalCount}个`,
            fontSize: 24,
            fontWeight: 'bold',
            fill: '#fff',
            width: 30,
            height: 30,
          },
        },
      ],
    },
  };

  myChart.setOption(option);

  // 监听图例的点击事件
  myChart.on('mouseover', (params) => {
    if (params.data) {
      myChart.setOption({
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: '52%',
              style: {
                text: `${params.data.value}个`,
                fontSize: 24,
                fontWeight: 'bold',
                fill: '#fff',
              },
            },
          ],
        },
      });
    }
  });

  // 鼠标移出时恢复显示总数
  myChart.on('mouseout', () => {
    myChart.setOption({
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: '52%',
            style: {
              text: `${totalCount}个`,
              fontSize: 24,
              fontWeight: 'bold',
              fill: '#fff',
            },
          },
        ],
      },
    });
  });

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>

<template>
  <dv-border-box-12 class="left-container">
    <div class="title">协会数量</div>
    <div class="chart-container">
      <div id="chart" style="height: calc(100% - 50px)"></div>
    </div>
  </dv-border-box-12>
</template>

<style scoped>
.left-container {
  width: 100%;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  color: #fff;
  font-size: 16px;
  margin: 5px 0;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: calc(100% - 40px);
}
</style>
